import HomeCard from '@/components/HomeCard'
import { useCharts } from '@/hooks/useCharts'
import { useModel } from '@umijs/max'
import React, { useEffect } from 'react'
import { formatMoney } from '@/utils/utils'

const ECommerceOrderBar = ({ dateTypeObj }) => {
  const { GetEcommerceOrderGoodsCount } = useModel('DataCenter')
  const [eCommerceOrderBarRef, eCommerceOrderBarChart, eCommerceOrderBarLoading, setECommerceOrderBarLoading] =
    useCharts() // 电商订单柱状图

  useEffect(() => {
    if (eCommerceOrderBarChart) getECommerceOrderBarData()
  }, [eCommerceOrderBarChart])

  const getECommerceOrderBarData = async (dateType = '近一周') => {
    eCommerceOrderBarChart?.clear()

    setECommerceOrderBarLoading(true)

    let params = {
      dateType: dateTypeObj[dateType].type
    }
    const res = await GetEcommerceOrderGoodsCount(params)

    if (res) {
      let name = []
      let lineData = []
      let numData = []

      let sortData = res.sort((a, b) => b.number - a.number)
      sortData.forEach(item => {
        name.push(item.goods_name)
        lineData.push(item.number)
        numData.push(formatMoney(item.number))
      })
      eCommerceOrderBarChart?.setOption({
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '10%'
        },
        xAxis: {
          type: 'value',
          // interval: 1, // 步长
          axisLabel: {
            fontFamily: 'DINPro-Medium',
            formatter: params => {
              return params + '件'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#E5E5E5'
            }
          }
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              verticalAlign: 'bottom',
              align: 'left',
              padding: [0, 10, 20, 6],
              textStyle: {
                fontSize: 12,
                color: '#615E83'
              }
            },
            yAxisIndex: 0,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: name
          },
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              inside: false,
              align: 'right',
              verticalAlign: 'bottom',
              padding: [0, 10, 8, 0],
              lineHeight: 30,
              textStyle: {
                fontFamily: 'DINPro-Medium',
                fontSize: 12,
                color: (params, index) => {
                  if (index === 3) {
                    return '#4A3AFF'
                  }
                  return '#615E83'
                }
              },
              formatter: (params, index) => {
                return params + '件'
              }
            },
            data: numData.reverse()
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '17',
            showBackground: true,
            backgroundStyle: {
              color: '#F8F8FF',
              borderRadius: 4
            },
            itemStyle: {
              borderRadius: 4,
              color: params => {
                let colorList = Array.from({ length: 4 }, () => '#7996B9')
                colorList[0] = '#2386FD'
                return colorList[params.dataIndex]
              }
            },
            data: lineData
          }
        ]
      })

      setECommerceOrderBarLoading(false)
    }
  }

  return (
    <>
      <HomeCard
        width={'50%'}
        height={'300px'}
        leftContent={{
          subTitle: '排名',
          title: '电商商品排行'
        }}
        loading={eCommerceOrderBarLoading}
        isTab
        tabClick={item => getECommerceOrderBarData(item)}
      >
        <div ref={eCommerceOrderBarRef} className='chart_box' />
      </HomeCard>
    </>
  )
}
export default ECommerceOrderBar
